<template>
  <div>
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const canvasRef = ref<HTMLCanvasElement>()

function calculateAngle(x: number, y: number): number {
  return (Math.atan2(y - 200, x - 200) * 180) / Math.PI
}

onMounted(() => {
  if (canvasRef.value) {
    canvasRef.value.width = innerWidth
    canvasRef.value.height = innerHeight
    const ctx = canvasRef.value?.getContext('2d')

    const strokeRect = (x: number, y: number, deg: number) => {
      ctx?.save()
      ctx?.beginPath()
      ctx?.translate(x, y)
      ctx?.rotate((deg * Math.PI) / 180)
      ctx?.strokeRect(-x / 2, -y / 2, 200, 200)
      ctx?.closePath()
      ctx?.restore()
    }
    const fillRect = (x: number, y: number, w: number, h: number, deg: number) => {
      ctx?.save()
      ctx?.beginPath()
      ctx?.translate(x, y)
      ctx?.rotate((deg * Math.PI) / 180)
      ctx?.fillRect(-x / 2, -y / 2, w, h)
      ctx?.closePath()
      ctx?.restore()
    }

    const wh = 100
    const radius = Math.sqrt(wh ** 2 + wh ** 2)

    for (let i = 0; i < 360; i++) {
      // const deg = (i * Math.PI) / 180
      const deg = (i * Math.PI) / 180
      const x = 200 + radius * Math.cos(deg)
      const y = 200 + radius * Math.sin(deg)
      ctx?.fillRect(x, y, 1, 1)
    }
    /* 根据坐标计算角度 */
    const r = calculateAngle(100, 100)
    const temp = 135
    strokeRect(200, 200, temp)

    /* 通过角度获取圆上的点 */
    const deg = ((temp + r) * Math.PI) / 180
    const x = 200 + radius * Math.cos(deg)
    const y = 200 + radius * Math.sin(deg)

    /* 画矩形 */
    // ctx?.fillRect(x, y, 200, 200)
    console.log(x, y)

    fillRect(x, y, 200, 200, r)
  }
})
</script>

<style lang="scss">
body {
  margin: 0;
  overflow: hidden;
}
</style>
